<template>
	<fieldset>
		<legend>商品详情页</legend>
        <h1>{{detail.title}}</h1>
        <h3>{{detail.desc}}</h3>
        <img :src="detail.imgSrc" width="200">
	</fieldset>
</template>
<script>
	// 接收List页面传递的动态id,和info中的数据进行匹配,并且将结果显示到模板中
	export default {
		props:['id'],//接收动态路由参数
		mounted() {
			console.log(this.$router) //整个项目中最大的路由对象,包含了$route
			console.log(this.$route)//$route只是当前这个页面的路由对象,包含的是当前页面的路由信息
			console.log(this.$route.params)
			//List页面动态传递过来的id
			// let id = this.$route.params.id;
			let id = this.id;
			//通过这个id去data中的info数据中,匹配响应的结果,并且展示就可以了
			let target = this.info.find(item => item.id == id);
            // console.log(target)
            this.detail = target;
		},
		data() {
            return {
                detail:{},
				info: [
					{
						id: 1,
						title: '苹果',
						imgSrc: "https://bkimg.cdn.bcebos.com/pic/0dd7912397dda14491b57772b0b7d0a20df486b5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto",
						desc: "苹果（Malus pumila Mill.）：是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右。树干呈灰褐色，树皮有一定程度的脱落。苹果树开花期是基于各地气候而定，但一般集中在4-5月份。苹果是异花授粉植物，大部分品种自花不能结成果实。"
					},
					{
						id: 2,
						title: '香蕉🍌',
						imgSrc: "https://bkimg.cdn.bcebos.com/pic/5d6034a85edf8db12c69f8ef0f23dd54574e74f2?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto",
						desc: "香蕉（学名：Musa nana Lour.）芭蕉科芭蕉属植物，又指其果实，热带地区广泛种植。香蕉味香、富含营养，植株为大型草本，从根状茎发出，由叶鞘下部形成高3～6米（10～20尺）的假杆；叶长圆形至椭圆形，有的长达3～3.5米（10～11.5尺），宽65厘米（26寸），10～20枚簇生茎顶。穗状花序下垂 [1]  ，由假杆顶端抽出，花多数，淡黄色；果序弯垂，结果10～20串，约50～150个。植株结果后枯死，由根状茎长出的吸根继续繁殖，每一根株可活多年。原产亚洲东南部，台湾、海南、广东、广西等均有栽培。西藏也有栽培。 [1] "
					},
				]
			}
		}
	}
</script>